/* NAVIGATION */
/*======================================*/
#mainnav-container
    position: absolute
    width: $mainnav-lg-width
    left: -$mainnav-lg-width
    padding-top: $navbar-height
    top: 0
    bottom: 0
    z-index: 4
    min-height: 100%
    @if lightness($mainnav-bg) >= 70%
        box-shadow: 0 0 0 1px darken($body-bg, 7.5%)


#mainnav
    height: 100%
    background-color: $mainnav-bg
    .list-header
        font-weight: $font-semibold
        color: darken($mainnav-color, 20%)

    .list-divider
        border-color: rgba(0,0,0,.1)
        margin: 10px 0


#mainnav-menu-wrap
    height: 100%

#mainnav-shortcut
    overflow: hidden


#container:not(.mainnav-sm)
    #mainnav-shortcut
        margin-top: 10px
        margin-bottom: 10px

    #mainnav-menu-wrap > .nano > .nano-content
        padding-top: 20px

    #mainnav-menu
        margin-top: 10px

    .mainnav-profile
        margin-top: -20px



/* PROFILE WIDGET */
/*======================================*/
.mainnav-sm
    .mainnav-profile
        visibility: hidden
        max-height: 0
        overflow: hidden
        opacity: 0
        margin: 0



.mainnav-profile
    color: $mainnav-active-color
    opacity: 1
    margin-bottom: 7px
    max-height: 350px
    .mnp-name
        color: $mainnav-active-color
        margin: 0
        font-size: 1.1em
        font-weight: $font-semibold

    .dropdown-caret, .mnp-desc
        color: $mainnav-active-color

    .profile-wrap
        padding: 30px 20px 12px
        @if $mainnav-profile-bg != ''
            background-image: url($mainnav-profile-bg)
            background-size: cover





#mainnav .mainnav-profile
    .list-group
        border-top: 1px solid rgba(0,0,0,.1)
        border-bottom: 1px solid rgba(0,0,0,.1)
        background-color: darken($mainnav-bg, 3%)
        margin: 0
        &-item
            color: $mainnav-color
            padding: 12px 20px
            &:hover
                color: $mainnav-hover-color
                background-color: transparent








/* NAVIGATION MENU */
/*======================================*/

#mainnav-menu ul, .mainnav-widget ul, .menu-popover ul, .menu-popover .sub-menu ul
    list-style: none
    padding-left: 0


#mainnav li
    .arrow
        float: right
        line-height: 1.42857

    .arrow:before
        content: ''
        border-style: solid
        border-width: 0.1em 0.1em 0 0
        display: inline-block
        height: 0.4em
        left: 0
        position: relative
        top: 0
        width: 0.4em
        +transform(rotate(45deg))


    &.active > a > .arrow:before
        +transform(rotate(135deg))




#mainnav-menu
    a
        display: block
        color: $mainnav-color
        padding: 12px 20px
        strong
            font-weight: $font-semibold


    >li
        >a
            &:hover, &:active
                color: $mainnav-hover-color

            &.hover
                color: $mainnav-hover-color
                background-color: lighten($mainnav-bg,3%)
                box-shadow: inset 2px 0 0 0 $mainnav-active-state



    > .active-link
        >a, >a:hover
            color: $mainnav-hover-color
            padding-left: 20px
            font-weight: $font-semibold
            box-shadow: inset 2px 0 0 0 $mainnav-active-state


    > .active-sub
        > a, >a:hover
            color: $mainnav-hover-color
            font-weight: $font-semibold


    > .active
        border-top: 1px solid rgba(0,0,0,.1)
        border-bottom: 1px solid rgba(0,0,0,.1)
        background-color: darken($mainnav-bg, 3%)
        .active
            border-top: 1px solid rgba(0,0,0,.1)
            border-bottom: 1px solid rgba(0,0,0,.1)
            background-color: darken($mainnav-bg, 5%)


    ul
        .list-header
            padding: 10px 20px 12px 55px

        ul
            a
                padding: 10px 20px 12px 65px



    i
        padding: 0 10px 0 0
        font-size: 1.15em

    .hide-lg
        display: none



#mainnav-menu, .menu-popover .sub-menu
    ul
        a
            padding: 10px 20px 12px 53px
            &:hover
                color: $mainnav-hover-color


        ul
            a:hover
                color: $mainnav-hover-color


        .active-link
            a
                font-weight: $font-semibold
                color: $mainnav-hover-color
                box-shadow: inset 2px 0 0 0 $mainnav-active-state





@if $mainnav-collapse == true
    #container.mainnav-sm
        #mainnav-menu
            >.active
                &-link, &-sub
                    > a, a:hover
                        background-color: $mainnav-active-state
                        box-shadow: none










/* NAVIGATION - SHORTCUT BUTTONS */
/*======================================*/
#mainnav-shortcut
    max-height: 1.7em
    overflow: hidden
    ul
        width: 100%
        margin: 0
        padding: 0

    li
        padding: 0
        vertical-align: middle
        text-align: center

    .shortcut-grid
        display: table
        border: 0
        width: 100%
        height: 1.7em
        color: $mainnav-hover-color
        >i
            display: table-cell
            vertical-align: middle
            font-size: 15px

        >span
            display: table-cell
            vertical-align: middle




@if $mainnav-collapse == true
    #container.mainnav-sm
        #mainnav-shortcut
            max-height: 250px
            >ul
                >li
                    width: 100%
                    text-align: left
                    .shortcut-grid
                        height: auto
                        display: block
                        padding: 12px ($mainnav-sm-width - ($font-size-base)) / 2

                    i
                        font-size: $font-size-base
                        line-height: 1.42857



            .shortcut-grid
                >.hide-sm
                    display: none













/* NAVIGATION - WIDGET */
/*======================================*/
.mainnav-widget
    background-color: rgba(0,0,0,.05)
    color: $mainnav-color
    &-content
        padding: 10px 15px

    .show-small
        a
            display: none












/* NAVIGATION - FIXED POSITION */
/*======================================*/
#container.mainnav-fixed
    #mainnav-container
        position: fixed

    #mainnav
        height: 100%
        height: 100vh
        .nano-content
            position: absolute




@media (min-width: 768px)
    #container.mainnav-fixed
        &.mainnav-lg #mainnav-menu-wrap
            height: 100%

        &.mainnav-sm
            #mainnav-menu-wrap
                height: 100%




    #container.mainnav-sm
        #mainnav
            .menu-popover
                .nano
                    >.nano-content
                        top: auto
                        max-height: 100%
                        position: absolute

                    &-content
                        position: static









/* MAIN NAVIGATION - AFFIX */
/*======================================*/
#container.mainnav-fixed:not(.navbar-fixed)
    #mainnav-container.affix
        top: 0 - $navbar-height
        position: fixed
        &-top
            top: 0
            position: absolute
            #mainnav-menu-wrap > .nano >.nano-content
                bottom: $navbar-height










/* MAIN NAVIGATION - EXPANDING  */
/* For large screen */
/*======================================*/
@media (min-width: 992px)
    #container.mainnav-lg
        #mainnav-container
            left: 0

        #footer, #content-container
            padding-left: $mainnav-lg-width








/* Expanding with off canvas mode */
/*======================================*/
@media (min-width: 768px) and (max-width: 991px)
    #container.mainnav-lg
        #content-container, #footer
            left: $mainnav-lg-width

        .tgl-menu-btn
            right: $mainnav-lg-width

        #mainnav-container
            left: 0

        #mainnav-menu-wrap
            height: 100%









@if $mainnav-collapse == true

    /* NAVIGATION - COLLAPSING  */
    /*======================================*/
    $shortcutHeight: 0 - ($font-size-base * 1.42857) - 24

    @media (min-width: 768px)
        #mainnav-menu
            .list-header, .list-divider, .menu-title, .arrow, .menu-title > .label, .menu-title > .badge
                opacity: 1

            .mainnav-sm &
                .list-header, .list-divider, .menu-title, .arrow, .menu-title > .label, .menu-title > .badge
                    padding-top: 0
                    padding-bottom: 0
                    margin: 0
                    height: 0
                    opacity: 0



        #container.mainnav-sm
            .brand-icon
                width: $navbar-height
                height: $navbar-height
                margin: 0 5px
                transform: translateY(($navbar-height - $mainnav-sm-width)/2 + 5)

            .shortcut-grid:hover
                box-shadow: inset 2px 0 0 0 $mainnav-active-state
                +transition(background-color .2s, padding-left .3s, box-shadow .4s)

            .shortcut-grid:hover,
            .popover.mainnav-shortcut
                background-color: lighten($mainnav-bg, 3%)
                color: $mainnav-hover-color

            #mainnav-menu
                a
                    white-space: nowrap
                    position: relative
                    padding: 12px 0 12px max(0, ($mainnav-sm-width - ($font-size-base)) / 2 )
                    &:hover
                        box-shadow: inset 2px 0 0 0 $mainnav-active-state

                    .badge
                        margin-top: -1.5em

                    .badge
                        position: absolute
                        padding: 3px 7px
                        right: 2px
                        top: 25%

                    i
                        display: inline


                .active-link, .active-sub
                    > a
                        color: $state-active-color


                .collapse
                    display: none
                    height: 0 !important


            #mainnav-container, #navbar .navbar-brand
                width: $mainnav-sm-width
                left: 0

            #navbar
                .navbar-content
                    margin-left: $mainnav-sm-width


            #content-container, #footer
                padding-left: $mainnav-sm-width
                left: 0


            #mainnav
                position: relative
                .mainnav-widget
                    >.show-small
                        a
                            display: block
                            color: $mainnav-color
                            padding: 12px 0 12px max(0, ($mainnav-sm-width - ($font-size-base)) / 2 )
                            &:hover
                                color: $mainnav-hover-color
                                box-shadow: inset 2px 0 0 0 $mainnav-active-state
                                transition: background-color .2s, padding-left .3s, box-shadow .4s



                    >.hide-small
                        display: none

                    .hover
                        color: $mainnav-hover-color
                        background-color: lighten($mainnav-bg, 3%)






        .top-auto
            top: auto !important


        /* NAVIGATION - POPOVER  */
        /*======================================*/
        #mainnav .menu-popover .nano > .nano-content
            position: absolute

        #mainnav-menu ul ul a:hover, .menu-popover .sub-menu ul ul a:hover
            background-color: rgba(0,0,0,.0005)


        .menu-popover
            left: $mainnav-sm-width !important
            .sub-menu
                overflow: hidden
                .pop-in
                    display: block
                    visibility: visible

                ul
                    background-color: darken($mainnav-bg,3%)
                    ul
                        background-color: darken($mainnav-bg,5%)
                        > li > a
                            padding-left: 27px
                            &:hover
                                color: $mainnav-hover-color



                    a
                        &:hover
                            color: $mainnav-hover-color


                    li
                        >a
                            display: block
                            color: $mainnav-color
                            padding: 12px 17px




            .single-content
                color: $mainnav-hover-color
                background-color: lighten($mainnav-bg, 3%)

            &.popover
                width: 220px
                padding: 0
                border: 0
                border-radius: 0 $border-radius-base  $border-radius-base 0
                background-color: darken($mainnav-bg,2%)
                color: $mainnav-hover-color
                position: absolute
                box-shadow: none
                margin-left: 0
                &.in
                    -webkit-animation: fadeIn .3s
                    animation: fadeIn .3s



            >.popover-title
                border: 0
                border-radius: 0
                padding: 14px 20px
                background-color: lighten($mainnav-bg, 3%)
                font-size: 1.05em
                font-weight: $font-semibold
                position: relative
                z-index: 5
                color: $mainnav-hover-color
                strong
                    font-weight: 300


            >.popover-content
                padding: 0
                width: 100%
                position: absolute
                border-radius: 0 0 $border-radius-base 0
                > .single-content
                    padding: 12px 14px
                    display: block
                    white-space: nowrap
                    strong
                        font-weight: 300

                    .label, .badge
                        margin-left: 10px
                        float: none !important



            ul
                width: 220px
                margin-bottom: 0

            .mainnav-widget-content
                background-color: lighten($mainnav-bg, 3%)
                > .list-group
                    display: block
                    width: auto




    .popover.mainnav-shortcut
        white-space: nowrap
        .popover-content
            padding: 12px 15px


    .mainnav-sm .popover.mainnav-shortcut
        display: block !important
        border: 0
        margin-top: $shortcutHeight
        margin-left: -1px
        padding: 0
        box-shadow: none
        overflow: hidden
        width: auto
        max-width: 300px
        border-radius: 0 $border-radius-base $border-radius-base 0
        background-color: darken($mainnav-bg,2%)
        color: $mainnav-hover-color
        left: $mainnav-sm-width !important
        &.in
            -webkit-animation: fadeIn .3s
            animation: fadeIn .3s
            .popover-content
                height: 100%
                margin: 0


        > .arrow
            display: none





@-webkit-keyframes fadeIn
    from
        opacity: 0


    to
        opacity: 1



@keyframes fadeIn
    from
        opacity: 0


    to
        opacity: 1














/* NAVIGATION - OFFCANVAS */
/*======================================*/
#container.mainnav-in
    &.footer-fixed #footer, #navbar, #content-container, #footer
        left: $mainnav-lg-width



#container.mainnav-out #content-container,
#container.mainnav-in #mainnav-container
    left: 0


#container.mainnav-in
    .navbar-header
        left: -$mainnav-lg-width

    .tgl-menu-btn
        right: $mainnav-lg-width

    #mainnav-menu-wrap
        height: 100%



@media (min-width: 768px)
    #container:not(.boxed-layout).mainnav-in.easeInBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-in.easeOutBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-in.easeInOutBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-in.jumping #mainnav-container,
    #container:not(.boxed-layout).mainnav-out.easeInBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-out.easeOutBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-out.easeInOutBack #mainnav-container,
    #container:not(.boxed-layout).mainnav-out.jumping #mainnav-container
        box-shadow: -20px 0 0 0 $mainnav-bg

    #container.mainnav
        &-in
            #navbar, .navbar-header
                left: 0

            .tgl-menu-btn
                right: 0

            &.aside-in
                #aside-container
                    right: -$mainnav-lg-width



        &-out
            .brand-title
                background-color: transparent
                color: $brand-color-overlay








@if $mainnav-reveal == true

    /* Reveal*/
    /*======================================*/
    @media (min-width: 768px)
        #container.reveal #content-container
            min-height: 100vh

        #container.mainnav-out.reveal #content-container,
        #container.mainnav-in.reveal #content-container
            z-index: 7


        #container.mainnav-in.reveal.aside-in #aside-container
            right: -$mainnav-lg-width


        #container.mainnav-in.reveal.aside-in #footer
            left: $mainnav-lg-width



        #container.mainnav-out.reveal #aside-container,
        #container.mainnav-in.reveal #aside-container
            z-index: 9



        #container.mainnav-out.reveal.aside-left:not(.aside-in) #aside-container,
        #container.mainnav-in.reveal.aside-left:not(.aside-in) #aside-container
            left: -$mainnav-lg-width


        #container.mainnav-out.reveal #footer,
        #container.mainnav-in.reveal #footer
            z-index: 8


        #container.mainnav-out.reveal #mainnav-container
            left: -$mainnav-lg-width



        #container.mainnav-in.reveal.slide .navbar-header:before,
        #container.mainnav-out.reveal.slide .navbar-header:before,
        #container.mainnav-out.reveal:not(.slide) #mainnav-container,
        #container.mainnav-in.reveal:not(.slide) #mainnav-container
            left: 0
            -webkit-transition-duration: 0
            transition-duration: 0





@if $mainnav-slide == true

    /* Slide in on top */
    /*======================================*/
    @media (min-width: 768px)
        #container.mainnav
            &-in.slide
                #navbar, #content-container, #footer
                    left: 0

                &.aside-in
                    &.aside-left
                        #aside-container
                            left: 0


                    #aside-container
                        right: 0







